import { React, useState } from 'react'
import {InfiniteScroll, ErrorBlock, Tabs} from 'antd-mobile'
import { LeftOutline } from 'antd-mobile-icons'
import '../Record/record.css'
import { getTransaction } from '../../request/api'
import { useNavigate } from "react-router-dom";
import { sleep } from 'antd-mobile/es/utils/sleep'
import { useTranslation } from "react-i18next";

export default function Funds() {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const [data, setData] = useState([])
  const [pageNum, setPageNum] = useState(1)
  const [hasMore, setHasMore] = useState(true)
  const [noData, setNoData] = useState(false)
  async function mockRequest() {
    setNoData(false)
    const res = await getTransaction({ page: pageNum })
    let list = data
    setData(list.concat(res.data.data))
    if (res.data.data.length < 1 && pageNum == 1) {//一条数据都没有
      setNoData(true)
      setData([])
      setPageNum(1)
      return []
    }
    await sleep(2000)
    setPageNum(pageNum + 1)
    return res.data.data
  }
  async function loadMore() {
    const append = await mockRequest()
    setHasMore(append.length >= 10)
  }
  const InfiniteScrollContent = ({ hasMore }) => {
    return (
      <>
        {hasMore ? (
          <>
            <span>{t('t4')}</span>
          </>
        ) : (
          <span>--- {t('t25')} ---</span>
        )}
      </>
    )
  }

  let status_name = {
    1: 'g2',
    3: 'mx2',
    6: 'mx1',
    7: 'g1',

  }
  return (
    <div className='funds'>
      <div className='header'>
        <div className='backIcon' onClick={() => { navigate('/User') }}>
          <LeftOutline />
        </div>
        <p>{t('g7')}</p>
      </div>
      {noData && <ErrorBlock
        title={t('t25')}
        image='./assets/index/empty.svg'
        style={{
          '--image-height': '150px',
        }}
        description={<span></span>}
      >
      </ErrorBlock>}
      {!noData && <div>
        <div className='detail_box'>
          {data.map((item, index) => (
            <div key={index}>
              <div className='detail_list'>
                <div>
                  <p>{t('d6')}</p>
                  {/*<p>{item.status == 1 ? (Number(item.amount > 0 ? t('g2') : t('g1'))) : item.status == 2 ? t('g1') : item.status == 3 ? t('mx1') : item.status == 4 ? t('mx2') : item.status == 5 ? t('td2') : t('mx3')}</p>*/}
                  <p>{t(status_name[item.type])}</p>
                </div>
                <p style={{ color: item.type == 1 ? '#ff5353' : '#0d8e31' }}>{item.num}</p>
                <div>
                  <p>{t('mx4')}</p>
                  <p>{item.addtime}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
          <InfiniteScrollContent hasMore={hasMore} />
        </InfiniteScroll>
      </div>}
    </div>
  )
}
